import {Component, OnInit, AfterViewInit, ElementRef} from '@angular/core';
import './rxjs-operators';
import {AuthService} from "./service/auth.service";
import {ToastyConfig} from 'ng2-toasty';


@Component({
  selector: 'my-app',
  template: `
<!-- Header Area -->
<header class="header-area inner-page">
  <!-- Header Top Area -->
  <section class="header-top">
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-xs-12">
          <div class="header-elements pull-right">
            <ul class="social-icon pull-left" [ngSwitch]="authService.isLoggedIn">
              <li *ngSwitchCase="false"><a routerLink="/login"><i class="fa fa-user-o"aria-hidden="true"></i><span>&nbsp;登陆/注册</span></a></li>
              <li *ngSwitchCase="true"><a routerLink="/back"><i class="fa fa-user-o" aria-hidden="true"></i>&nbsp;个人中心</a></li>
              <li *ngSwitchCase="true"><a routerLink="/back/articlemanage"><i class="fa fa-book"></i>&nbsp;文章管理</a></li>
              <li *ngSwitchCase="true"><a routerLink="/back/activitymanage"><i class="fa fa-users"></i>&nbsp;活动管理</a></li>
              <li *ngSwitchCase="true"><a routerLink="/index" (click)="logout()"><i class="fa fa-power-off"></i>&nbsp;退出登录</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- /.header-top -->
  <nav class="navigation">
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-xs-12">
          <div class="logo pull-left">
            <a routerLink="index"><img alt="Kidzy" src="images/home1/logo-2.png"></a>
          </div>
          <ul class="main-menu pull-right">
            <li>
              <a routerLink="/index">首页</a>
            </li>
            <!--<li><a routerLink="/activity">活动</a></li>-->
            <li><a routerLink="/articleList">文章</a></li>
            <!--<li><a routerLink="back">管理</a></li>-->
            <!--<li class="menu-has-child">-->
              <!--<a routerLink="class">班级</a>-->
              <!--<ul>-->
                <!--<li><a routerLink="class-details">班级信息</a></li>-->
              <!--</ul>-->
            <!--</li>-->
            <!--<li class="menu-has-child">-->
              <!--<a routerLink="blog">博客</a>-->
              <!--<ul>-->
                <!--<li><a routerLink="blog-details">博客详情</a></li>-->
              <!--</ul>-->
            <!--</li>-->
            <!--<li class="menu-has-child">-->
              <!--<a routerLink="teacher">老师</a>-->
              <!--<ul>-->
                <!--<li><a routerLink="teacher-details">老师信息</a></li>-->
              <!--</ul>-->
            <!--</li>-->
            <li>
              <a routerLink="#" id="search-pop"><i class="fa fa-search"></i></a>
            </li>
          </ul>
          <div class="mobile-menu hidden-lg hidden-md hidden-sm">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
    </div>
    <div class="search-area">
      <form action="#" method="post">
        <input type="search" name="search" placeholder="Enter your Search Text Here....">
      </form>
      <a routerLink="#" class="search-close"><i class="fa fa-times"></i></a>
    </div>
  </nav>
</header>
<!-- /.header-area -->
<ng2-toasty [position]="'top-center'"></ng2-toasty>
<router-outlet></router-outlet>
<!-- Footer Section -->
<footer class="footer-section">
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-6 col-xs-12 text-left">
        <div class="about-widget">
          <div class="footer-logo">
            <a routerLink="index"><img alt="" src="images/home1/footer-logo-1.png"></a>
          </div>
          <p>我需要三件东西：爱情友谊和图书。然而这三者之间何其相通！炽热的爱情可以充实图书的内容，图书又是人们最忠实的朋友。</p>
          <span>&copy; 2016 </span>
          <ul class="social-icon">
            <li><a routerLink="#"><i class="fa fa-facebook"></i></a></li>
            <li><a routerLink="#"><i class="fa fa-twitter"></i></a></li>
            <li><a routerLink="#"><i class="fa fa-google-plus"></i></a></li>
            <li><a routerLink="#"><i class="fa fa-instagram"></i></a></li>
          </ul>
        </div>
      </div>
      <div class="col-md-2 col-sm-6 col-xs-12 text-left">
        <div class="footer-widget">
          <h3>快速连接</h3>
          <ul>
            <li><a routerLink="#">首页</a></li>
            <li><a routerLink="#">关于我们</a></li>
            <li><a routerLink="#">画廊</a></li>
            <li><a routerLink="#">博客</a></li>
            <li><a routerLink="#">社交</a></li>
          </ul>
        </div>
      </div>
      <div class="col-md-2 col-sm-6 col-xs-12 text-left">
        <div class="footer-widget">
          <h3>班级</h3>
          <ul>
            <li><a routerLink="#">快乐的孩子</a></li>
            <li><a routerLink="#">小羊羔</a></li>
            <li><a routerLink="#">心的主人</a></li>
            <li><a routerLink="#">兔子的房子</a></li>
            <li><a routerLink="#">可怕的老虎</a></li>
          </ul>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="footer-widget">
          <h3>通讯</h3>
          <p>版权 &copy; 2016.公司名称保留所有权利.</p>
          <form action="#" method="post" class="subscribe-form">
            <input type="email" name="email" placeholder="请输入邮箱">
            <button class="primary-btn pull-right"><span>点击</span></button>
            <div class="clearfix"></div>
          </form>
        </div>
      </div>
    </div>
  </div>
</footer>
  `
})


export class AppComponent implements OnInit,AfterViewInit {

  constructor(private elementRef: ElementRef,public authService: AuthService, private toastyConfig: ToastyConfig) {};

  ngAfterViewInit() {
    // viewChild is set after the view has been initialized
    let s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "js/kidmain.js";
    this.elementRef.nativeElement.appendChild(s);
  }

  ngOnInit() {
    if (localStorage.getItem('remember')) {
      this.authService.setCompactJws(localStorage.getItem('compactJws'))
    } else if (sessionStorage.getItem('compactJws')) {
      this.authService.setCompactJws(sessionStorage.getItem('compactJws'))
    }
  }

  logout():void {
    this.authService.logout();
  }
}
